package myJs.search.detail

import myJs.Implicits._
import myJs.api.Api
import myJs.cps._
import myJs.myPkg.{MyFetch, SwalOptions, swal}
import myJs.tool.Tool
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.Pojo._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._
import upickle.default._

import scala.collection.immutable.SeqMap
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object OrthologCp {

  case class Props(geneName: String, species: String)

  val component = FunctionalComponent[Props] { props =>

    val (orthologs, setOrthologs) = useState(List.empty[String])

    object FTool {

      def refreshOrthologs = () => {
        Api.getOrthologs(props.geneName, props.species).map { geneNames =>
          setOrthologs(geneNames)
        }
      }
    }

    useEffect(() => {
      FTool.refreshOrthologs()
    }, List(props.geneName)
    )

    if (orthologs.nonEmpty) {
      val orthologSpecies = props.species match {
        case "Mmu" => "Hsa"
        case "Hsa" => "Mmu"
      }
      div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`, marginTop = 5),
        span(style := Style(padding = 5, backgroundColor = "#F2F2F2"), "Ortholog ",
          a(href := s"#${Detail.absolutePath}?geneName=${orthologs.head}&species=${orthologSpecies}", target := "_blank",
            s"${orthologSpecies}"))
      )
    } else null

  }

  object STool {

  }

}
